<template>
  <div>
    <el-table :data="tableData" size="small">
      <el-table-column width="100" prop="date" label="日期" />
      <el-table-column width="80" label="课次">
        <template #default="scope">{{field_format(scope.$index,'classIndex') }}</template>
      </el-table-column>
      <el-table-column width="120" label="时段">
        <template #default="scope">{{field_format(scope.$index,'timeRange') }}</template>
      </el-table-column>
      <el-table-column width="80" label="课时">
        <template #default="scope">{{field_format(scope.$index,'classHour') }}</template>
      </el-table-column>
      <el-table-column prop="address" label="课程">
        <template #default="scope">{{field_format(scope.$index,'curriculum') }}</template>
      </el-table-column>
      <el-table-column width="80" label="理论课时" align="center">
        <template #default="scope">{{field_format(scope.$index,'theoreticalClassHours') }}</template>
      </el-table-column>
      <el-table-column width="80" label="实训课时" align="center">
        <template #default="scope">{{field_format(scope.$index,'practicalTrainingHours') }}</template>
      </el-table-column>
      <el-table-column width="80" label="评议人数" align="center">
        <template #default="scope">
          <div v-if="scope.row.evaluateCount">
            <div style="color: #CB6123;cursor: pointer" @click="proxy.$refs.collegeEvaluationFormRef.open(scope.row,scope.$index,matchingData)">
              {{scope.row.evaluateCount}} / {{classStudentsNum}}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="80" label="评议率" align="center">
        <template #default="scope">
          <div v-if="scope.row.evaluateCount">
            <div style="color: #CB6123;cursor: pointer" @click="proxy.$refs.collegeEvaluationFormRef.open(scope.row,scope.$index,matchingData)">
              {{(scope.row.evaluateCount/classStudentsNum*100).toFixed(2) }}%
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="140" label="评议日期" align="center" prop="fillTime" />
      <el-table-column width="80" label="评议操作" align="center">
        <template #default="scope">
          <div class="action-text" @click="handClick(scope.row)">{{scope.row.evaluateCount ? '清空' : '导入'}}</div>
        </template>
      </el-table-column>
    </el-table>

    <input type="file" @change="handleFileUpload" v-show="false" ref="inputFile" />

    <input type="file" @change="handleTemplateFileUpload" v-show="false" ref="templateFile" />

    <collegeEvaluationForm ref="collegeEvaluationFormRef" :type="props.type" :archiveBinding="props.archiveBinding"></collegeEvaluationForm>
  </div>
</template>

<script setup lang="ts">
import collegeEvaluationForm from "@/views/courseManage/components/collegeEvaluationForm.vue";
let props = defineProps(["info", "archiveBinding", "type"]);
const { proxy } = getCurrentInstance();
import useCounterStore from "@/store/counter";
const counter = useCounterStore();

let archiveBindingList = [];
let row = {}; //导入哪一行的数据
let classStudentsNum = ref(0);
let tableData = ref([]);
let templateUrl;

async function handClick(item) {
  if (item.evaluateCount) {
    let resp = await proxy.$utils.confirmTips("是否确认清空?");
    if (!resp) return;
    await proxy.$apis.classReport({
      type: "student-evaluate-delete",
      data: { classId: props.info._id, lessonScheduleId: row["_id"] },
    });
    proxy.$utils.showToast("清空成功");
    getInfo();
  } else {
    row = { ...item };
    proxy.$refs.inputFile.click();
    counter.downLoadTemplate("class-evaluate-template");

    //模板导入
    //proxy.$refs.templateFile.click();
  }
}

//模板导入
async function handleTemplateFileUpload(event) {
  const files = event.target.files;
  counter.importTemplate(files, "class-evaluate-template");
}

async function handleFileUpload(event) {
  try {
    const files = event.target.files;
    let file = files[0];
    let list = [];
    let resp = await proxy.$utils.fileToJson(file);
    for (let index = 0; index < resp.length; index++) {
      const element = resp[index];
      if (index) {
        list.push({
          name: element[0],
          idCard: element[1],
          fillTime: element[2],
          teachingAttitude: element[3], //教学态度
          contentCourses: element[4], //教学内容
          trainingMethods: element[5], //培训方式
          teachingDevices: element[6], //教学手段
          explainDemo: element[7], //讲解示范
          guidanceAspect: element[8], //指导方面
          completionStatus: element[9], //完成情况
          suggestionsOpinions: element[10], //建议意见
          customerType: element[11], //用户类型
        });
      }
    }
    await proxy.$apis.classReport({
      type: "student-evaluate-file",
      data: { classId: props.info._id, lessonScheduleId: row["_id"], list },
    });
    proxy.$utils.showToast("导入成功");
    getInfo();
  } catch (error) {
  } finally {
    event.target.value = "";
  }
}

function field_format(index, field) {
  if (!archiveBindingList.length) return;
  try {
    return archiveBindingList[index][field];
  } catch (error) {
    console.log(`${index}-${field}`, error);
  }
}

async function getClassStudents() {
  classStudentsNum.value = await proxy.$apis.classStudent({
    type: "queryNotSuspended",
    data: { classId: props.info._id },
  });
}

async function getInfo() {
  getClassStudents();
  let resp = await proxy.$apis.classReport({
    type: "B1-list",
    data: { classId: props.info._id, type: "evaluate" },
  });
  if (props.archiveBinding.length) {
    archiveBindingList = await proxy.$apis.scheduleRelevant({
      type: "archives-curriculum-list",
      data: { archivesId: props.archiveBinding[0]._id },
    });
  }
  console.log("基础数据", resp);
  nextTick(() => {
    tableData.value = resp;
  });
}

function downLoadTemplate() {
  window.location.href = templateUrl;
}

async function getTemplateUrl() {
  templateUrl = await proxy.$apis.fileTemplate({
    data: { type: props.type },
    type: "downLoad",
  });
}

watch(
  () => [props.info, props.archiveBinding],
  (newValue, oldValue) => {
    if (newValue) {
      nextTick(() => {
        getInfo();
      });
    }
  },
  { deep: true, immediate: true }
);

defineExpose({ downLoadTemplate, getTemplateUrl });
</script>



<style lang="scss" scoped>
.action-text {
  color: var(--el-color-primary);
  cursor: pointer;
}
</style>

